/* ===== from _post-template ===== */
.post-hero{background:linear-gradient(180deg,#232d0a 0%,#1a2207 100%);color:#fff;padding:70px 20px 0;font-family:Inter,sans-serif}
    .ph-inner{max-width:980px;margin:0 auto}
    .ph-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:12px}
    .ph-chip{display:inline-flex;padding:8px 16px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:13px}
    .ph-meta{font-size:14px;color:#c9d1b8}
    .post-hero h1{font-size:48px;font-weight:800;line-height:1.15;margin-bottom:14px}
    .ph-sub{color:#c9d1b8;font-size:17px;padding-bottom:44px}
    .ph-cover{max-width:980px;margin:0 auto;display:block;width:100%;border-radius:16px 16px 0 0;object-fit:cover;max-height:420px}
    .article-wrap{max-width:820px;margin:60px auto;padding:0 20px;font-family:Inter,sans-serif;color:#041527}
    .article-content{font-size:17px;line-height:1.75;color:#333}
    .article-content h2{margin:40px 0 14px;font-size:28px;font-weight:800;color:#041527}
    .article-content h2 .accent{color:#4caf2e}
    .article-content h3{margin:26px 0 8px;font-size:19px;font-weight:700;color:#041527}
    .article-content p{margin-bottom:18px}
    .article-content ul,.article-content ol{margin:0 0 18px 26px}
    .article-content li{margin-bottom:6px}
    .article-content img{max-width:100%;border-radius:12px}
    .callout{background:linear-gradient(135deg,#2f8f2f,#1f7a1f);color:#fff;border-radius:16px;padding:34px 38px;margin:36px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:10px}
    .callout .big{font-size:27px;font-weight:800;line-height:1.3}
    .back-link{display:inline-block;margin-bottom:22px;color:#0a7d33;text-decoration:none;font-weight:600}
    @media(max-width:700px){.post-hero h1{font-size:32px}}

/* ===== from ai-cobol-to-java-modernization ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"roboto",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from ai-software-modernization ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
 .art li{
  word-break: break-all;
 }
    }

/* ===== from choosing-cobol-modernization-consultants ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px;scroll-margin-top:100px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    /* table of contents */
    .toc{background:#f6f7f4;border-left:3px solid #297907;border-radius:0 12px 12px 0;padding:26px 30px;margin:34px 0}
    .toc .toc-h{font-family:var(--display);font-size:18px;font-weight:700;color:#000;margin:0 0 14px;letter-spacing:-0.3px}
    .toc ol{margin:0;padding-left:20px}
    .toc li{margin-bottom:7px;font-size:17px;line-height:24px}
    .toc a{color:var(--brand-green);text-decoration:none}
    .toc a:hover{text-decoration:underline}
    /* inline article figures, full width */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table td.rowlbl{color:#000;font-weight:700;white-space:nowrap}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .toc{padding:20px 22px}
      .toc li{font-size:16px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from cobol-to-java-migration-cost ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from conways-law-modernization ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"roboto",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .art table td.score{text-align:center;color:#297907;font-weight:700;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from eu-cra-legacy-mainframe-estates ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px;scroll-margin-top:100px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:Consolas,Monaco,"Courier New",monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    /* table of contents */
    .toc{background:#f6f7f4;border-left:3px solid #297907;border-radius:0 12px 12px 0;padding:26px 30px;margin:34px 0}
    .toc .toc-h{font-family:var(--display);font-size:18px;font-weight:700;color:#000;margin:0 0 14px;letter-spacing:-0.3px}
    .toc ol{margin:0;padding-left:20px}
    .toc li{margin-bottom:7px;font-size:17px;line-height:24px}
    .toc a{color:var(--brand-green);text-decoration:none}
    .toc a:hover{text-decoration:underline}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .art table td.rowlbl{color:#000;font-weight:700;white-space:nowrap}
    .art table td.idx{color:#297907;font-weight:700;text-align:center}
    /* end-of-article CTA banner */
    .cta{background:linear-gradient(90deg,#297907 0%,#223500 100%);color:#fff;border-radius:24px;padding:44px 48px;margin:44px 0 0}
    .cta h3{color:#fff !important;font-family:var(--display);font-size:28px;font-weight:700;line-height:36px;margin:0 0 12px;letter-spacing:-0.5px}
    .cta p{color:#e2f4e0 !important;font-size:17px !important;line-height:26px !important;margin:0 0 22px;max-width:720px}
    .cta a.btn{display:inline-block;background:#cdeec4;color:#124a12;font-family:Roboto,Inter,sans-serif;font-weight:700;font-size:16px;padding:14px 30px;border-radius:999px;text-decoration:none}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .toc{padding:20px 22px}
      .toc li{font-size:16px}
      .cta{padding:32px 26px;border-radius:16px}
      .cta h3{font-size:23px;line-height:30px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from financial-services-legacy-modernization-cost ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
.art li{
  word-break: break-all;
}
    }

/* ===== from how-deterministic-software-transformation-works ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}
    .art a{color:#5A7A00}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
      .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from how-long-does-cobol-to-java-migration-take ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from is-automated-cobol-to-java-conversion-reliable ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:Consolas,Monaco,"Courier New",monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    /* code blocks */
    .art pre{background:#f6f7f4;border-left:3px solid #297907;border-radius:10px;padding:20px 24px;margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .art pre code{font-family:Consolas,Monaco,"Courier New",monospace;background:none;padding:0;border-radius:0;font-size:15px;line-height:24px;color:#1b2430;white-space:pre;display:block}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .art pre{padding:16px 18px;border-radius:8px}
      .art pre code{font-size:13px;line-height:21px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from legacy-system-security-risk ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"roboto",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var("roboto");font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from mainframe-exit-inventory ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px;scroll-margin-top:100px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    /* table of contents */
    .toc{background:#f6f7f4;border-left:3px solid #297907;border-radius:0 12px 12px 0;padding:26px 30px;margin:34px 0}
    .toc .toc-h{font-family:var(--display);font-size:18px;font-weight:700;color:#000;margin:0 0 14px;letter-spacing:-0.3px}
    .toc ol{margin:0;padding-left:20px}
    .toc li{margin-bottom:7px;font-size:17px;line-height:24px}
    .toc a{color:var(--brand-green);text-decoration:none}
    .toc a:hover{text-decoration:underline}
    /* inline article figures, full width */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table td.rowlbl{color:#000;font-weight:700;white-space:nowrap}
    /* end-of-article CTA banner */
    .cta{background:linear-gradient(90deg,#297907 0%,#223500 100%);color:#fff;border-radius:24px;padding:44px 48px;margin:44px 0 0}
    .cta h3{color:#fff !important;font-family:var(--display);font-size:28px;font-weight:700;line-height:36px;margin:0 0 12px;letter-spacing:-0.5px}
    .cta p{color:#e2f4e0 !important;font-size:17px !important;line-height:26px !important;margin:0 0 22px;max-width:720px}
    .cta p a{color:#fff}
    .cta a.btn{display:inline-block;background:#cdeec4;color:#124a12;font-family:Roboto,Inter,sans-serif;font-weight:700;font-size:16px;padding:14px 30px;border-radius:999px;text-decoration:none}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .toc{padding:20px 22px}
      .toc li{font-size:16px}
      .cta{padding:32px 26px;border-radius:16px}
      .cta h3{font-size:23px;line-height:30px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from micro-focus-cobol-to-csharp ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"inter",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px;scroll-margin-top:100px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    /* table of contents */
    .toc{background:#f6f7f4;border-left:3px solid #297907;border-radius:0 12px 12px 0;padding:26px 30px;margin:34px 0}
    .toc .toc-h{font-family:var(--display);font-size:18px;font-weight:700;color:#000;margin:0 0 14px;letter-spacing:-0.3px}
    .toc ol{margin:0;padding-left:20px}
    .toc li{margin-bottom:7px;font-size:17px;line-height:24px}
    .toc a{color:var(--brand-green);text-decoration:none}
    .toc a:hover{text-decoration:underline}
    /* inline article figures, full width */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table td.rowlbl{color:#000;font-weight:700;white-space:nowrap}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .toc{padding:20px 22px}
      .toc li{font-size:16px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from modernization-business-case ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from rehost-refactor-rearchitect-mainframe ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:Consolas,Monaco,"Courier New",monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    /* code blocks */
    .art pre{background:#f6f7f4;border-left:3px solid #297907;border-radius:10px;padding:20px 24px;margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .art pre code{font-family:Consolas,Monaco,"Courier New",monospace;background:none;padding:0;border-radius:0;font-size:15px;line-height:24px;color:#1b2430;white-space:pre;display:block}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .art table td.rowlbl{color:#000;font-weight:700;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .art pre{padding:16px 18px;border-radius:8px}
      .art pre code{font-size:13px;line-height:21px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from strangler-fig-pattern-migration ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"Roboto, sans-serif;",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from why-gen-ai-alone-is-not-enough-for-modernization ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from why-mainframe-modernization-projects-fail ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}

   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:var(--display);font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:Consolas,Monaco,"Courier New",monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    /* code blocks */
    .art pre{background:#f6f7f4;border-left:3px solid #297907;border-radius:10px;padding:20px 24px;margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .art pre code{font-family:Consolas,Monaco,"Courier New",monospace;background:none;padding:0;border-radius:0;font-size:15px;line-height:24px;color:#1b2430;white-space:pre;display:block}
    .pull{border-left:3px solid #297907;padding:4px 0 4px 22px;margin:24px 0}
    .pull p{color:#000;font-size:22px !important;line-height:32px !important;margin:0}
    /* "visible at" stamp under each failure */
    .seen{border-left:3px solid #297907;background:#f6f7f4;border-radius:0 8px 8px 0;padding:12px 18px;margin:20px 0}
    .seen p{margin:0;color:#000 !important;font-size:16px !important;line-height:22px !important}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .art table td.rowlbl{color:#000;font-weight:700;white-space:nowrap}
    .tbl-note{font-size:15px !important;line-height:22px !important;color:rgba(12,2,29,0.45) !important;margin-top:-6px}
    .fig-ph{width:100%;height:420px;background:#dcdcdc;border-radius:18px;margin:36px 0}
    .callout{border-radius: 24px;
background: linear-gradient(90deg, #297907 0%, #223500 100%);color:#fff;border-radius:16px;padding:36px 42px;margin:40px 0}
    .callout .small{font-size:14px;color:#dff2df;margin-bottom:12px}
    .callout .big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.28}
    .rulebox{display:flex;align-items:center;gap:22px;background:#f6f6f6;border-radius:14px;padding:26px 32px;margin:22px 0;font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}
    .rulebox .arr{color:var(--accent-green);font-size:26px}
    .code-inline{font-family:monospace;background:#f2f2f2;padding:2px 8px;border-radius:6px;font-size:15px;color:var(--ink)}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .art pre{padding:16px 18px;border-radius:8px}
      .art pre code{font-size:13px;line-height:21px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .pull p{font-size:19px !important;line-height:28px !important}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .fig-ph{height:220px}
      .callout .big{font-size:23px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }

/* ===== from zos-2-5-end-of-support ===== */
:root{
      --hero-green-1:#2a3510; --hero-green-2:#161d05;
      --brand-green:#0a7d33; --accent-green:#5abc2e;
      --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#3d4652; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
    .bp{font-family:Inter,sans-serif}
    .bp *{box-sizing:border-box}
.cta p a {
    color: #fff !important;
}
   .p-hero::after {
    background: linear-gradient(180deg, #223500 19.71%, rgba(34, 53, 0, 0.00) 100%);
    content: "";
    top: 60px;
    width: 100%;
    height: 700px;
    left: 0;
    position: absolute;
}
    /* ============ HERO ============ */
    .p-hero{background:linear-gradient(180deg,var(--hero-green-1) 0%,var(--hero-green-2) 100%);color:#fff;padding:100px 0 100px}
    .p-hero .inner{max-width:1200px;margin:0 auto;padding:0px;z-index: 1;
    position: relative;}
    .p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px}
    .p-chip{display:inline-flex;padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:13px;color:#fff}
    .p-meta{font-size:14px;color:#c9d1b8}
    .p-hero h1{color:#FFF;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:62px;font-style:normal;font-weight:700;line-height:72px;letter-spacing:-1.44px;max-width:900px;margin:0 0 16px}
    .p-hero h1 .nm{font-family:Roboto,Inter,sans-serif}
    .p-sub{color:#FFF;font-family:Roboto,Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;padding-bottom:46px;max-width:640px}
    .p-cover{display:block;width:100%;max-height:320px;object-fit:cover}

    /* ============ ARTICLE ============ */
    .art{max-width:1200px;margin:70px auto;padding:0px}
    .art .col{max-width:100%}
    .art h2{color:#000;font-family:"FONTSPRING DEMO - Roc Grotesk",Inter,sans-serif;font-size:40px;font-style:normal;font-weight:700;line-height:50px;letter-spacing:-1.44px;margin:56px 0 18px;scroll-margin-top:100px}
    .art h2:first-child{margin-top:0}
    .art h2 .accent{color:#297907}
    .art h3{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:26px 0 8px}
    .art h3.sub{color:#000;font-family:"roboto";font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.6px;margin:34px 0 12px}
    /* numerals and symbols inside headings render in Roboto */
    .art h2 .nm,.art h3 .nm,.nl h2 .nm{font-family:Roboto,Inter,sans-serif;letter-spacing:-0.6px}
    .art p{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin:0 0 16px}
    .art ul{margin:0 0 18px 8px;padding-left:18px}
    .art ol{margin:0 0 18px 8px;padding-left:18px}
    .art li{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:25px;letter-spacing:-0.2px;margin-bottom:5px}
    .art li.plain{font-weight:400;color:var(--body)}
    .art a{color:var(--brand-green)}
    .art strong{color:rgba(12,2,29,0.85);font-weight:700}
    .art code{font-family:Consolas,Monaco,"Courier New",monospace;background:#f4f4f4;padding:1px 6px;border-radius:4px;font-size:16px;color:#0f1c33}
    /* table of contents */
    .toc{background:#f6f7f4;border-left:3px solid #297907;border-radius:0 12px 12px 0;padding:26px 30px;margin:34px 0}
    .toc .toc-h{font-family:var(--display);font-size:18px;font-weight:700;color:#000;margin:0 0 14px;letter-spacing:-0.3px}
    .toc ol{margin:0;padding-left:20px}
    .toc li{margin-bottom:7px;font-size:17px;line-height:24px}
    .toc a{color:var(--brand-green);text-decoration:none}
    .toc a:hover{text-decoration:underline}
    /* inline article figures */
    .art figure{margin:36px 0}
    .art figure img{display:block;width:100%;height:auto;border-radius:18px}
    .art figcaption{font-family:Roboto,Inter,sans-serif;font-size:15px;line-height:22px;color:rgba(12,2,29,0.45);margin-top:10px}
    /* data tables */
    .tbl-wrap{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
    .art table{border-collapse:collapse;width:100%;min-width:640px}
    .art table th{color:#000;font-family:var(--display);font-size:15px;font-weight:700;line-height:20px;text-align:left;padding:12px 14px;border-bottom:2px solid #297907;vertical-align:bottom}
    .art table td{color:rgba(12,2,29,0.60);font-family:Roboto,Inter,sans-serif;font-size:16px;line-height:22px;padding:12px 14px;border-bottom:1px solid #ececec;vertical-align:top}
    .art table tr:last-child td{border-bottom:1px solid #ececec}
    .art table tfoot td{color:#000;font-weight:700;border-top:2px solid #297907}
    .art table td.num,.art table th.num{text-align:right;white-space:nowrap}
    .art table td.rowlbl{color:#000;font-weight:700;white-space:nowrap}
    /* end-of-article CTA banner */
    .cta{background:linear-gradient(90deg,#297907 0%,#223500 100%);color:#fff;border-radius:24px;padding:44px 48px;margin:44px 0 0}
    .cta h3{color:#fff !important;font-family:var(--display);font-size:28px;font-weight:700;line-height:36px;margin:0 0 12px;letter-spacing:-0.5px}
    .cta p{color:#e2f4e0 !important;font-size:17px !important;line-height:26px !important;margin:0 0 22px;max-width:720px}
    .cta a.btn{display:inline-block;background:#cdeec4;color:#124a12;font-family:Roboto,Inter,sans-serif;font-weight:700;font-size:16px;padding:14px 30px;border-radius:999px;text-decoration:none}
    .back-link{display:inline-block;margin-bottom:28px;color:var(--brand-green);text-decoration:none;font-weight:600}

    /* ============ NEWSLETTER ============ */
    .nl{max-width:1200px;margin:70px auto;border-radius:24px;padding:100px 58px;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{color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 100% */margin:0 0 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}

    @media(max-width:900px){
      .p-hero h1{font-size:34px;line-height:1.15}
      .art h3.sub{font-size:21px;line-height:28px}
      .art table th{font-size:14px}
      .art table td{font-size:15px}
      .toc{padding:20px 22px}
      .toc li{font-size:16px}
      .cta{padding:32px 26px;border-radius:16px}
      .cta h3{font-size:23px;line-height:30px}
      .art figure{margin:26px 0}
      .art figure img{border-radius:12px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
        .p-hero .inner{
        padding: 0 20px;
      }
      .art {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0px 20px;
}
    }


/* fix: anchor hero overlay to the hero itself */
.p-hero{position:relative;}