.fabric-article-page { background: #fff; }
.fabric-hero { position: relative; padding: 170px 0 88px; overflow: hidden; color: #fff; background: radial-gradient(circle at 85% 8%, rgba(64, 211, 195, .18), transparent 31%), radial-gradient(circle at 10% 100%, rgba(91, 113, 242, .25), transparent 36%), #091733; }
.fabric-hero::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.fabric-hero-inner { position: relative; z-index: 1; max-width: 1040px; min-width: 0; }
.article-back { display: inline-block; margin-bottom: 35px; color: #78ddd2; font-size: 12px; font-weight: 800; letter-spacing: .2px; }
.fabric-series { display: block; margin-bottom: 18px; color: #64dacc; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.fabric-hero h1 { max-width: 960px; margin: 0; font-family: var(--display); font-size: clamp(46px, 5.5vw, 74px); line-height: 1.04; letter-spacing: -3.5px; text-wrap: balance; }
.fabric-hero p { max-width: 800px; margin: 28px 0 0; color: #b8c5dc; font-size: 19px; line-height: 1.6; }
.fabric-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; color: #8495b4; font-size: 12px; font-weight: 700; }
.fabric-meta span { position: relative; }
.fabric-meta span:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -16px; width: 4px; height: 4px; border-radius: 50%; background: #44cfbf; }
.fabric-layout { max-width: 1040px; padding-top: 74px; padding-bottom: 110px; }
.fabric-article { width: 100%; min-width: 0; max-width: 820px; margin: 0 auto; color: #2b3850; font-size: 17px; line-height: 1.82; overflow-wrap: anywhere; }
.fabric-cover { width: 100%; height: auto; margin: 0 0 64px; border-radius: 15px; box-shadow: 0 24px 65px rgba(11, 30, 65, .14); }
.fabric-section { padding: 56px 0 4px; border-top: 1px solid #e1e6ee; scroll-margin-top: 30px; }
.fabric-section:first-of-type { border-top: 0; padding-top: 0; }
.fabric-article h2 { margin: 0 0 25px; color: var(--ink); font-family: var(--display); font-size: 38px; line-height: 1.18; letter-spacing: -1.5px; }
.fabric-article h3 { margin: 34px 0 13px; color: var(--ink); font-family: var(--display); font-size: 24px; line-height: 1.25; }
.fabric-article p { margin: 0 0 24px; }
.fabric-article strong { color: #16233e; }
.fabric-article ul, .fabric-article ol { margin: 25px 0 30px; padding-left: 25px; }
.fabric-article li { margin: 11px 0; padding-left: 6px; }
.fabric-article li::marker { color: #159f92; font-weight: 800; }
.fabric-article code { padding: .12em .34em; border-radius: 4px; color: #173b65; background: #eef4f8; font-size: .9em; }
.fabric-article pre { margin: 28px 0 34px; padding: 24px; overflow-x: auto; border: 1px solid #23385d; border-radius: 12px; background: #0d1b36; box-shadow: 0 18px 45px rgba(15, 34, 70, .12); }
.fabric-article pre code { padding: 0; color: #d8e5f3; background: transparent; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.65; }
.article-figure { width: min(1120px, calc(100vw - 48px)); margin: 42px 50% 14px; transform: translateX(-50%); }
.article-figure img { width: 100%; height: auto; border: 1px solid #dce3ec; border-radius: 12px; background: #fff; box-shadow: 0 20px 55px rgba(21, 39, 72, .11); }
.figure-caption { margin: 0 auto 38px !important; color: #68758a; font-size: 13px; font-style: italic; line-height: 1.6; text-align: center; }
.table-scroll { width: min(1050px, calc(100vw - 48px)); margin: 34px 50% 40px; overflow-x: auto; transform: translateX(-50%); border: 1px solid #dce3ed; border-radius: 12px; }
.fabric-article table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.55; }
.fabric-article th, .fabric-article td { padding: 17px 19px; border-bottom: 1px solid #e4e9f0; text-align: left; vertical-align: top; }
.fabric-article thead th { color: #fff; background: #102044; font-size: 12px; letter-spacing: .2px; }
.fabric-article tbody th { color: #142441; background: #f7f9fc; }
.fabric-article a:not(.button):not(.blog-email-link):not(.related-grid a) { color: #245ec6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.related-insights { margin-top: 72px; padding-top: 55px; border-top: 1px solid #e1e6ef; }
.related-insights h2 { font-size: 32px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.related-grid a { display: flex; min-height: 190px; padding: 27px; border: 1px solid #dce3ed; border-radius: 13px; flex-direction: column; color: #172641; background: #fafcff; transition: transform .2s, border-color .2s, box-shadow .2s; }
.related-grid a:hover { transform: translateY(-3px); border-color: #82a7ec; box-shadow: 0 18px 38px rgba(29, 58, 109, .1); }
.related-grid span { color: #298f85; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.related-grid strong { margin: 17px 0; font-family: var(--display); font-size: 20px; line-height: 1.25; }
.related-grid em { margin-top: auto; color: #356bd1; font-size: 12px; font-style: normal; font-weight: 800; }
.fabric-article .article-author { margin-top: 54px; }
.insights-list { padding-top: 65px; padding-bottom: 100px; }
.insights-list > h2 { margin: 0 0 30px; font-family: var(--display); font-size: 32px; letter-spacing: -1px; }
.insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.insight-card { min-width: 0; overflow: hidden; border: 1px solid #dce3ed; border-radius: 15px; background: #fff; box-shadow: 0 12px 32px rgba(21,39,72,.06); }
.insight-card > a { display: flex; height: 100%; flex-direction: column; }
.insight-card img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.insight-card a > div:not(.readiness-card-cover) { display: flex; flex: 1; flex-direction: column; padding: 27px; }
.insight-card h2 { margin: 8px 0 16px; font-family: var(--display); font-size: 24px; line-height: 1.3; letter-spacing: -.7px; }
.insight-card p { margin: 0 0 24px; color: #647089; font-size: 15px; }
.insight-read { margin-top: auto; color: #245ec6; font-size: 13px; font-weight: 800; }
.insight-card a:hover h2 { color: #245ec6; }
.readiness-card-cover { display: flex; aspect-ratio: 1200 / 630; align-items: center; padding: 30px; color: #fff; background: linear-gradient(135deg, #102044, #234c6b); font-family: var(--display); font-size: 27px; font-weight: 800; line-height: 1.3; }
@media (max-width: 1000px) { .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .insights-grid { grid-template-columns: 1fr; } }
@media (max-width: 780px) {
  .fabric-hero { padding: 142px 0 70px; }
  .fabric-hero h1 { font-size: clamp(39px, 10.8vw, 58px); letter-spacing: -2.4px; }
  .fabric-hero p { font-size: 17px; }
  .fabric-layout { padding-top: 50px; padding-bottom: 80px; }
  .fabric-cover { margin-bottom: 48px; }
  .fabric-section { padding-top: 45px; }
  .fabric-article h2 { font-size: 31px; }
  .article-figure, .table-scroll { width: calc(100vw - 30px); }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .fabric-hero h1 { font-size: 38px; }
  .fabric-meta { display: grid; gap: 5px; }
  .fabric-meta span::after { display: none; }
  .fabric-cover { border-radius: 10px; }
  .fabric-article { font-size: 16px; }
  .fabric-article pre { padding: 18px; }
}
@media print {
  .site-header, .site-footer, .blog-cta, .related-insights, .article-back { display: none !important; }
  .fabric-hero { padding: 30px 0; color: #000; background: #fff; }
  .fabric-hero h1, .fabric-hero p, .fabric-series, .fabric-meta { color: #000; }
  .fabric-layout { padding: 25px 0; }
  .fabric-cover { box-shadow: none; }
  .article-figure, .table-scroll { width: 100%; margin-inline: 0; transform: none; }
}
