/* Shared Blog 2.0 article shell. Content-specific modules may remain, but the page rhythm is consistent. */
.blog-article-standard { max-width: 1180px; padding: 72px 0 110px; }
.blog-article-standard .blog-article-header { max-width: 820px; margin: 0 auto; padding-bottom: 0; border-bottom: 0; text-align: center; }
.blog-article-standard .blog-breadcrumb, .blog-article-standard .blog-article-header .blog-kicker { justify-content: center; }
.blog-article-standard .blog-article-title { max-width: 820px; margin: 18px auto 0; font-size: clamp(2.65rem, 6vw, 5rem); line-height: 1.02; }
.blog-article-standard .blog-article-header .blog-lede { max-width: 700px; margin: 26px auto 0; font-size: 19px; line-height: 1.65; }
.blog-article-standard > .blog-author-card { max-width: 820px; margin: 34px auto 0; }
.blog-article-standard .blog-article-layout { grid-template-columns: minmax(0, 760px) minmax(190px, 220px); justify-content: center; gap: clamp(48px, 7vw, 96px); margin-top: 72px; }
.blog-article-standard .blog-article-body { max-width: 760px; font-size: 18px; line-height: 1.78; }
.blog-article-standard .blog-article-body > p:first-child { color: #e7e0ec; font-size: 21px; line-height: 1.65; }
.blog-article-standard .blog-article-body h2 { margin-top: 76px; padding-top: 0; border-top: 0; color: #f4eef8; font-size: clamp(1.9rem, 3.3vw, 2.65rem); line-height: 1.15; }
.blog-article-standard .blog-article-body h2::before { display: none; }
.blog-article-standard .blog-article-body h3 { margin-top: 38px; color: #f4eef8; font-size: 21px; line-height: 1.35; }
.blog-article-standard .blog-article-body a { text-decoration: none; }
.blog-article-standard .blog-article-body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-article-standard .blog-article-body .blog-hero-visual { display: none; }
.blog-article-standard .blog-inline-cta { align-items: flex-start; margin: 38px 0 42px; padding: 20px 0; border: 0; border-top: 1px solid #4a4453; border-bottom: 1px solid #4a4453; border-radius: 0; background: transparent; }
.blog-article-standard .blog-atomic-answer { margin: 34px 0; padding: 22px 0 22px 20px; border: 0; border-left: 2px solid #d3bbff; border-radius: 0; background: transparent; color: #e7e0ec; }
.blog-article-standard .blog-factor-grid, .blog-article-standard .blog-method-grid, .blog-article-standard .blog-recommendation-grid, .blog-article-standard .blog-pricing-cards, .blog-article-standard .blog-scenario-grid, .blog-article-standard .blog-decision-grid, .blog-article-standard .blog-type-grid { gap: 0; }
.blog-article-standard .blog-factor-grid > div, .blog-article-standard .blog-method-grid > div, .blog-article-standard .blog-recommendation-grid > div, .blog-article-standard .blog-pricing-cards > div, .blog-article-standard .blog-scenario-grid > div, .blog-article-standard .blog-decision-grid > div, .blog-article-standard .blog-type-grid > div { min-height: 0; padding: 18px 16px 18px 0; border: 0; border-top: 1px solid #4a4453; border-radius: 0; background: transparent; }
.blog-article-standard .blog-factor-grid > div:last-child, .blog-article-standard .blog-method-grid > div:last-child, .blog-article-standard .blog-recommendation-grid > div:last-child, .blog-article-standard .blog-pricing-cards > div:last-child, .blog-article-standard .blog-scenario-grid > div:last-child, .blog-article-standard .blog-decision-grid > div:last-child, .blog-article-standard .blog-type-grid > div:last-child { border-bottom: 1px solid #4a4453; }
.blog-article-standard .ranking-entry { margin: 48px 0; padding: 28px 0 8px; border: 0; border-top: 1px solid #4a4453; border-bottom: 1px solid #4a4453; border-radius: 0; background: transparent; }
.blog-article-standard .ranking-entry h3 { padding-bottom: 14px; border-bottom: 0; }
.blog-article-standard .blog-numbered-list li, .blog-article-standard .blog-checklist li, .blog-article-standard .blog-hiring-checklist li { margin: 0; padding: 10px 0 10px 32px; border: 0; border-bottom: 1px solid #4a4453; border-radius: 0; background: transparent; }
.blog-article-standard .blog-numbered-list li::before, .blog-article-standard .blog-checklist li::before { top: 10px; left: 0; }
.blog-article-standard .blog-checklist-panel, .blog-article-standard .blog-sign-card { margin: 44px 0; padding: 22px 0; border: 0; border-top: 1px solid #4a4453; border-bottom: 1px solid #4a4453; border-radius: 0; background: transparent; box-shadow: none; }
.blog-article-standard .blog-article-sidebar { position: sticky; top: 110px; align-self: start; }
.blog-article-standard .blog-sidebar-inner { border-left: 1px solid #4a4453; padding-left: 20px; }
.blog-article-standard .blog-article-sidebar nav a { display: block; margin: 11px 0; color: #958e9f; font-size: 14px; line-height: 1.4; text-decoration: none; }
.blog-article-standard .blog-article-sidebar nav a:hover, .blog-article-standard .blog-article-sidebar nav a.is-active { color: #f4eef8; }
.blog-article-standard > .blog-cta { display: block; max-width: 820px !important; margin: 80px auto 0; padding: 72px 24px 0; border-top: 1px solid #4a4453; text-align: center; }
.blog-article-standard > .blog-cta h2 { max-width: 650px; margin: 12px auto 16px; }
.blog-article-standard > .blog-cta .blog-cta-actions { justify-content: center; }
.blog-article-standard > .blog-cta .blog-cta-visual { margin: 24px auto 0; }
.blog-article-standard .ecommerce-prototype-banner, .blog-article-standard .hiring-prototype-banner, .blog-article-standard .cost-prototype-banner, .blog-article-standard .readiness-prototype-banner, .blog-article-standard .ranking-prototype-banner { position: relative; max-width: 1000px; margin: 58px auto 0; overflow: hidden; border: 1px solid #4a4453; border-radius: 14px; background: #1b1820; }
.blog-article-standard .ecommerce-prototype-banner img, .blog-article-standard .hiring-prototype-banner img, .blog-article-standard .cost-prototype-banner img, .blog-article-standard .readiness-prototype-banner img, .blog-article-standard .ranking-prototype-banner img { display: block; width: 100%; max-height: 540px; object-fit: contain; background: #16131b; }
.blog-article-standard .ecommerce-prototype-banner figcaption, .blog-article-standard .hiring-prototype-banner figcaption, .blog-article-standard .cost-prototype-banner figcaption, .blog-article-standard .readiness-prototype-banner figcaption, .blog-article-standard .ranking-prototype-banner figcaption { padding: 15px 20px; color: #958e9f; font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) { .blog-article-standard .blog-article-layout { display: block; margin-top: 48px; } .blog-article-standard .blog-article-sidebar { display: none; } }
@media (max-width: 600px) { .blog-article-standard { width: min(100% - 36px, 760px); padding: 48px 0 84px; } .blog-article-standard .blog-article-title { font-size: clamp(2.35rem, 11vw, 3.15rem); } .blog-article-standard .blog-article-header .blog-lede { font-size: 17px; } .blog-article-standard .ecommerce-prototype-banner, .blog-article-standard .hiring-prototype-banner, .blog-article-standard .cost-prototype-banner, .blog-article-standard .readiness-prototype-banner, .blog-article-standard .ranking-prototype-banner { margin-top: 42px; } .blog-article-standard .blog-article-body { font-size: 17px; line-height: 1.75; } .blog-article-standard .blog-article-body > p:first-child { font-size: 19px; } .blog-article-standard .blog-article-body h2 { margin-top: 58px; font-size: 28px; } .blog-article-standard > .blog-cta { margin-top: 58px; padding-top: 52px; } }