/* Article component library (TL;DR, signal boxes, steps, FAQ, CTA…) scoped to .sa-art */
.article-body .sa-art *,.article-body .sa-art *::before,.article-body .sa-art *::after{box-sizing: border-box; margin: 0; padding: 0;}
.article-body .sa-art{--pink: #E8176A; --pink-light: #FCE4EE; --pink-mid: #F7AFC9; --ink: #0D0D0D; --ink-soft: #2D2D2D; --body-text: #1A1A1A; --muted: #6B6B6B; --muted-light: #9A9A9A; --surface: #FFFFFF; --surface-alt: #F8F6F3; --surface-dark: #0D0D0D; --border: #E2E2E2; --border-strong: #C8C8C8; --green: #1A6B3A; --green-light: #E6F4EC; --amber: #7A4B00; --amber-light: #FEF3CD; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;}
.article-body .sa-art{font-family: 'Georgia', 'Times New Roman', serif; color: var(--body-text); background: var(--surface); line-height: 1.75; -webkit-font-smoothing: antialiased;}
.article-body .sa-art .article-category{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin-bottom: 1rem;}
.article-body .sa-art .article-category a{color: inherit; text-decoration: none;}
.article-body .sa-art .article-category span{color: var(--muted); margin: 0 0.4em;}
.article-body .sa-art h1{font-family: 'Georgia', serif; font-size: 2.15rem; font-weight: normal; line-height: 1.25; color: var(--ink); margin-bottom: 1.25rem; letter-spacing: -0.02em;}
.article-body .sa-art .byline{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2.5rem; flex-wrap: wrap;}
.article-body .sa-art .byline strong{color: var(--ink-soft); font-weight: 600;}
.article-body .sa-art .byline-dot{color: var(--border-strong);}
.article-body .sa-art .tldr{background: var(--ink); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; margin-bottom: 2.75rem;}
.article-body .sa-art .tldr-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.9rem;}
.article-body .sa-art .tldr ul{list-style: none; padding: 0;}
.article-body .sa-art .tldr li{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: #D4D4D4; line-height: 1.55; padding: 0.45rem 0; border-bottom: 0.5px solid #2A2A2A; padding-left: 1.1rem; position: relative;}
.article-body .sa-art .tldr li:last-child{border-bottom: none;}
.article-body .sa-art .tldr li::before{content: ''; position: absolute; left: 0; top: 0.85rem; width: 5px; height: 5px; border-radius: 50%; background: var(--pink);}
.article-body .sa-art p{margin-bottom: 1.3rem; font-size: 1rem; line-height: 1.8;}
.article-body .sa-art .cta-inline{background: var(--pink-light); border-left: 3px solid var(--pink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 0.85rem 1.1rem; margin: 1.75rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.55;}
.article-body .sa-art .cta-inline a{color: var(--pink); font-weight: 600; text-decoration: none;}
.article-body .sa-art .cta-inline a:hover{text-decoration: underline;}
.article-body .sa-art .section-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.4rem; margin-top: 3rem;}
.article-body .sa-art h2{font-family: 'Georgia', serif; font-size: 1.55rem; font-weight: normal; line-height: 1.3; color: var(--ink); margin-bottom: 1.1rem; letter-spacing: -0.015em;}
.article-body .sa-art h3{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 700; color: var(--ink); margin-top: 1.5rem; margin-bottom: 0.5rem;}
.article-body .sa-art .section-divider{border: none; border-top: 0.5px solid var(--border); margin: 2.5rem 0;}
.article-body .sa-art .reason-pill{display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ink); color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.85rem; border-radius: 20px; margin-bottom: 0.75rem; margin-top: 3rem;}
.article-body .sa-art .reason-pill .pill-num{background: var(--pink); color: #fff; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700;}
.article-body .sa-art .infographic-stat{background: var(--surface-alt); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin: 1.75rem 0; display: flex; align-items: flex-start; gap: 1.25rem;}
.article-body .sa-art .infographic-stat .stat-num{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--pink); line-height: 1; flex-shrink: 0; min-width: 70px;}
.article-body .sa-art .infographic-stat .stat-body{}
.article-body .sa-art .infographic-stat .stat-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem;}
.article-body .sa-art .infographic-stat .stat-source{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; color: var(--muted);}
.article-body .sa-art .signal-box{border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: 1.75rem 0;}
.article-body .sa-art .signal-box-header{background: var(--ink); padding: 0.75rem 1.25rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.78rem; font-weight: 700; color: #fff; letter-spacing: 0.05em; text-transform: uppercase;}
.article-body .sa-art .signal-box-header span{color: var(--pink); margin-right: 0.4rem;}
.article-body .sa-art .signal-item{display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.8rem 1.25rem; border-bottom: 0.5px solid var(--border); font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: var(--body-text); line-height: 1.5;}
.article-body .sa-art .signal-item:last-child{border-bottom: none;}
.article-body .sa-art .signal-item .signal-icon{width: 22px; height: 22px; border-radius: 50%; background: var(--pink-light); color: var(--pink); font-size: 0.72rem; font-weight: 800; font-family: 'Helvetica Neue', Arial, sans-serif; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.05rem;}
.article-body .sa-art .signal-item:nth-child(odd){background: var(--surface-alt);}
.article-body .sa-art .sequence-wrap{margin: 1.75rem 0;}
.article-body .sa-art .sequence-step{display: flex; gap: 1rem; margin-bottom: 0; position: relative;}
.article-body .sa-art .sequence-step::before{content: ''; position: absolute; left: 15px; top: 36px; bottom: -4px; width: 1px; background: var(--border-strong);}
.article-body .sa-art .sequence-step:last-child::before{display: none;}
.article-body .sa-art .seq-left{display: flex; flex-direction: column; align-items: center; flex-shrink: 0;}
.article-body .sa-art .seq-num{width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1;}
.article-body .sa-art .sequence-step:last-child .seq-num{background: var(--pink);}
.article-body .sa-art .seq-content{padding-bottom: 1.5rem; flex: 1;}
.article-body .sa-art .seq-title{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; margin-top: 0.3rem;}
.article-body .sa-art .seq-body{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.825rem; color: var(--muted); line-height: 1.55;}
.article-body .sa-art .compare-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.75rem 0;}
.article-body .sa-art .compare-card{border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem;}
.article-body .sa-art .compare-card.bad{border-top: 3px solid #E24B4A;}
.article-body .sa-art .compare-card.good{border-top: 3px solid #1D9E75;}
.article-body .sa-art .compare-card-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem;}
.article-body .sa-art .compare-card.bad .compare-card-label{color: #A32D2D;}
.article-body .sa-art .compare-card.good .compare-card-label{color: #0F6E56;}
.article-body .sa-art .compare-item{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.825rem; color: var(--body-text); padding: 0.3rem 0; border-bottom: 0.5px solid var(--border); line-height: 1.45;}
.article-body .sa-art .compare-item:last-child{border-bottom: none;}
.article-body .sa-art blockquote{border-left: 3px solid var(--pink); padding: 0.5rem 0 0.5rem 1.25rem; margin: 1.75rem 0; font-style: italic; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7;}
.article-body .sa-art blockquote cite{display: block; margin-top: 0.5rem; font-style: normal; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.78rem; color: var(--muted); font-weight: 600;}
.article-body .sa-art .insight{background: var(--surface-alt); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; margin: 1.75rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: var(--body-text); line-height: 1.6; border: 0.5px solid var(--border);}
.article-body .sa-art .insight strong{font-weight: 700; color: var(--ink);}
.article-body .sa-art .cta-block{background: var(--ink); border-radius: var(--radius-lg); padding: 2rem 2rem; margin: 2.5rem 0; text-align: center;}
.article-body .sa-art .cta-block-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.75rem;}
.article-body .sa-art .cta-block h3{font-family: 'Georgia', serif; font-size: 1.4rem; font-weight: normal; color: #fff; margin-top: 0; margin-bottom: 0.6rem; line-height: 1.3;}
.article-body .sa-art .cta-block p{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: #AAAAAA; margin-bottom: 1.25rem; line-height: 1.55;}
.article-body .sa-art .cta-block-items{display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1.25rem; flex-wrap: wrap;}
.article-body .sa-art .cta-block-item{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.78rem; color: #CCCCCC; display: flex; align-items: center; gap: 0.35rem;}
.article-body .sa-art .cta-block-item::before{content: '✓'; color: var(--pink); font-weight: 700;}
.article-body .sa-art .cta-btn{display: inline-block; background: var(--pink); color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.9rem; font-weight: 700; padding: 0.85rem 2rem; border-radius: 6px; text-decoration: none; letter-spacing: 0.01em; transition: opacity 0.15s;}
.article-body .sa-art .cta-btn:hover{opacity: 0.88;}
.article-body .sa-art .cta-note{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; color: #777; margin-top: 0.75rem; margin-bottom: 0 !important;}
.article-body .sa-art .what-happens{display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 0.75rem; margin: 1.5rem 0;}
.article-body .sa-art .wh-card{border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 1rem; background: var(--surface-alt);}
.article-body .sa-art .wh-card .wh-title{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem;}
.article-body .sa-art .wh-card .wh-body{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; color: var(--muted); line-height: 1.5;}
.article-body .sa-art .faq-section{margin-top: 3rem;}
.article-body .sa-art .faq-item{border-bottom: 0.5px solid var(--border); padding: 1.1rem 0;}
.article-body .sa-art .faq-item:first-child{border-top: 0.5px solid var(--border);}
.article-body .sa-art .faq-q{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.925rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem;}
.article-body .sa-art .faq-a{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-bottom: 0;}
.article-body .sa-art a{color: var(--pink); text-decoration: none;}
.article-body .sa-art a:hover{text-decoration: underline;}
@media (max-width: 600px){.article-body .sa-art h1{font-size: 1.65rem;}
.article-body .sa-art .infographic-stat{flex-direction: column; gap: 0.5rem;}
.article-body .sa-art .compare-grid{grid-template-columns: 1fr;}
.article-body .sa-art .what-happens{grid-template-columns: 1fr;}
.article-body .sa-art .cta-block{padding: 1.5rem 1.25rem;}}
.article-body .sa-art{--pink: #E8176A; --pink-light: #FCE4EE; --pink-dark: #B5114F; --ink: #0D0D0D; --ink-soft: #2A2A2A; --body-text: #1A1A1A; --muted: #666666; --surface: #FFFFFF; --surface-alt: #F8F6F3; --surface-dark: #0D0D0D; --border: #E2E2E2; --border-strong: #CACACA; --step-bg: #F3F0EB; --green: #0F6E56; --green-light: #E6F4EC; --amber-light: #FEF9EE; --amber-border: #F0D080; --amber-text: #7A5500; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;}
.article-body .sa-art .article-category span{color: var(--border-strong); margin: 0 0.4em;}
.article-body .sa-art .format-tag{display: inline-block; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--pink-light); color: var(--pink); padding: 0.2rem 0.65rem; border-radius: 20px; margin-bottom: 0.85rem;}
.article-body .sa-art h1{font-family: 'Georgia', serif; font-size: 2.1rem; font-weight: normal; line-height: 1.22; color: var(--ink); margin-bottom: 1.2rem; letter-spacing: -0.02em;}
.article-body .sa-art .tldr-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.85rem;}
.article-body .sa-art .tldr ul{list-style: none;}
.article-body .sa-art .tldr li{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: #CCCCCC; line-height: 1.55; padding: 0.4rem 0 0.4rem 1.1rem; border-bottom: 0.5px solid #252525; position: relative;}
.article-body .sa-art .tldr li::before{content: ''; position: absolute; left: 0; top: 0.82rem; width: 5px; height: 5px; border-radius: 50%; background: var(--pink);}
.article-body .sa-art .section-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.4rem; margin-top: 3rem;}
.article-body .sa-art h2{font-family: 'Georgia', serif; font-size: 1.52rem; font-weight: normal; line-height: 1.3; color: var(--ink); margin-bottom: 1rem; letter-spacing: -0.015em;}
.article-body .sa-art h3{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-top: 1.4rem; margin-bottom: 0.45rem; letter-spacing: 0;}
.article-body .sa-art .hook-stat{display: flex; align-items: stretch; gap: 0; border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: 2rem 0;}
.article-body .sa-art .hook-stat-accent{background: var(--pink); width: 6px; flex-shrink: 0;}
.article-body .sa-art .hook-stat-body{padding: 1.25rem 1.4rem; background: var(--surface-alt); flex: 1;}
.article-body .sa-art .hook-stat-num{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--pink); line-height: 1; margin-bottom: 0.3rem;}
.article-body .sa-art .hook-stat-text{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; font-weight: 600;}
.article-body .sa-art .hook-stat-sub{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem;}
.article-body .sa-art blockquote cite{display: block; margin-top: 0.5rem; font-style: normal; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; color: var(--muted); font-weight: 600;}
.article-body .sa-art .role-split{display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: 1.75rem 0;}
.article-body .sa-art .role-col{padding: 0;}
.article-body .sa-art .role-col-header{padding: 0.7rem 1.1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;}
.article-body .sa-art .role-col.stays .role-col-header{background: var(--ink); color: #fff; border-right: 0.5px solid #222;}
.article-body .sa-art .role-col.transfers .role-col-header{background: var(--pink); color: #fff;}
.article-body .sa-art .role-item{display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 1.1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.825rem; color: var(--body-text); border-bottom: 0.5px solid var(--border); line-height: 1.4;}
.article-body .sa-art .role-col.stays .role-item{border-right: 0.5px solid var(--border); background: var(--surface-alt);}
.article-body .sa-art .role-col.transfers .role-item{background: var(--surface);}
.article-body .sa-art .role-item:last-child{border-bottom: none;}
.article-body .sa-art .role-dot{width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 0.38rem;}
.article-body .sa-art .stays .role-dot{background: var(--ink);}
.article-body .sa-art .transfers .role-dot{background: var(--pink);}
.article-body .sa-art .steps-wrap{margin: 2rem 0;}
.article-body .sa-art .step-card{border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem;}
.article-body .sa-art .step-header{display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--ink);}
.article-body .sa-art .step-num-badge{width: 36px; height: 36px; border-radius: 50%; background: var(--pink); color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.article-body .sa-art .step-title-block{}
.article-body .sa-art .step-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.15rem;}
.article-body .sa-art .step-title{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1.3;}
.article-body .sa-art .step-body{padding: 1.2rem 1.25rem;}
.article-body .sa-art .step-body p{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: var(--body-text); line-height: 1.65; margin-bottom: 0.9rem;}
.article-body .sa-art .step-body p:last-child{margin-bottom: 0;}
.article-body .sa-art .step-sub{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; margin-top: 0.9rem;}
.article-body .sa-art .step-list{list-style: none; padding: 0; margin: 0 0 0.5rem;}
.article-body .sa-art .step-list li{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; color: var(--body-text); line-height: 1.5; padding: 0.3rem 0 0.3rem 1rem; border-bottom: 0.5px solid var(--border); position: relative;}
.article-body .sa-art .step-list li:last-child{border-bottom: none;}
.article-body .sa-art .step-list li::before{content: '→'; position: absolute; left: 0; color: var(--pink); font-size: 0.75rem; top: 0.35rem;}
.article-body .sa-art .mistake-box{background: #FEF9EE; border: 0.5px solid #F0D080; border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-top: 0.75rem;}
.article-body .sa-art .mistake-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7A5500; margin-bottom: 0.3rem;}
.article-body .sa-art .mistake-text{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.825rem; color: #5A4000; line-height: 1.5;}
.article-body .sa-art .assessment{border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: 1.75rem 0;}
.article-body .sa-art .assessment-header{background: var(--ink); padding: 0.85rem 1.25rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.78rem; font-weight: 700; color: #fff; letter-spacing: 0.04em;}
.article-body .sa-art .assessment-header span{color: var(--pink);}
.article-body .sa-art .assessment-item{display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.75rem 1.25rem; border-bottom: 0.5px solid var(--border); font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; color: var(--body-text); line-height: 1.5;}
.article-body .sa-art .assessment-item:nth-child(odd){background: var(--surface-alt);}
.article-body .sa-art .assessment-item:last-child{border-bottom: none;}
.article-body .sa-art .checkbox{width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 4px; flex-shrink: 0; margin-top: 0.1rem; background: var(--surface);}
.article-body .sa-art .failure-table{border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: 1.75rem 0; font-family: 'Helvetica Neue', Arial, sans-serif;}
.article-body .sa-art .failure-table-header{display: grid; grid-template-columns: 1.4fr 1fr 1fr; background: var(--ink);}
.article-body .sa-art .ft-th{padding: 0.65rem 1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #999; border-right: 0.5px solid #222;}
.article-body .sa-art .ft-th:last-child{border-right: none;}
.article-body .sa-art .failure-table-row{display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-bottom: 0.5px solid var(--border);}
.article-body .sa-art .failure-table-row:last-child{border-bottom: none;}
.article-body .sa-art .failure-table-row:nth-child(even) .ft-td{background: var(--surface-alt);}
.article-body .sa-art .ft-td{padding: 0.75rem 1rem; font-size: 0.825rem; color: var(--body-text); line-height: 1.45; border-right: 0.5px solid var(--border); background: var(--surface);}
.article-body .sa-art .ft-td:last-child{border-right: none;}
.article-body .sa-art .ft-td.mode{font-weight: 700; color: var(--ink);}
.article-body .sa-art .when-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.75rem 0;}
.article-body .sa-art .when-card{border-radius: var(--radius-md); padding: 1rem 1.1rem; border: 0.5px solid var(--border);}
.article-body .sa-art .when-card.diy{border-top: 3px solid var(--ink);}
.article-body .sa-art .when-card.help{border-top: 3px solid var(--pink);}
.article-body .sa-art .when-card-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.65rem;}
.article-body .sa-art .when-card.diy .when-card-label{color: var(--ink);}
.article-body .sa-art .when-card.help .when-card-label{color: var(--pink);}
.article-body .sa-art .when-card p{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.82rem; color: var(--muted); line-height: 1.55; margin-bottom: 0;}
.article-body .sa-art .cta-block{background: var(--ink); border-radius: var(--radius-lg); padding: 2rem; margin: 2.5rem 0; text-align: center;}
.article-body .sa-art .cta-block-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.7rem;}
.article-body .sa-art .cta-block h3{font-family: 'Georgia', serif; font-size: 1.4rem; font-weight: normal; color: #fff; margin-top: 0; margin-bottom: 0.55rem; line-height: 1.3;}
.article-body .sa-art .cta-block > p{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; color: #AAAAAA; margin-bottom: 1.25rem; line-height: 1.55;}
.article-body .sa-art .cta-chips{display: flex; gap: 0.65rem; justify-content: center; margin-bottom: 1.25rem; flex-wrap: wrap;}
.article-body .sa-art .cta-chip{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.775rem; color: #CCCCCC; display: flex; align-items: center; gap: 0.35rem;}
.article-body .sa-art .cta-chip::before{content: '✓'; color: var(--pink); font-weight: 700;}
.article-body .sa-art .cta-btn{display: inline-block; background: var(--pink); color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.9rem; font-weight: 700; padding: 0.85rem 2rem; border-radius: 6px; text-decoration: none; transition: opacity 0.15s;}
.article-body .sa-art .cta-note{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; color: #666; margin-top: 0.75rem; margin-bottom: 0 !important;}
.article-body .sa-art .upsell-box{border: 1.5px solid var(--pink); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; margin: 2rem 0; background: var(--pink-light);}
.article-body .sa-art .upsell-label{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.5rem;}
.article-body .sa-art .upsell-title{font-family: 'Georgia', serif; font-size: 1.1rem; color: var(--ink); margin-bottom: 0.5rem; line-height: 1.3;}
.article-body .sa-art .upsell-body{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.85rem;}
.article-body .sa-art .upsell-btn{display: inline-block; background: var(--pink); color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; font-weight: 700; padding: 0.6rem 1.4rem; border-radius: 5px; text-decoration: none;}
.article-body .sa-art .upsell-btn:hover{opacity: 0.88;}
.article-body .sa-art .faq-q{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: 0.45rem;}
.article-body .sa-art .faq-a{font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.86rem; color: var(--muted); line-height: 1.65; margin-bottom: 0;}
@media (max-width: 600px){.article-body .sa-art h1{font-size: 1.6rem;}
.article-body .sa-art .role-split{grid-template-columns: 1fr;}
.article-body .sa-art .role-col.stays .role-item{border-right: none;}
.article-body .sa-art .when-grid{grid-template-columns: 1fr;}
.article-body .sa-art .failure-table-header,.article-body .sa-art .failure-table-row{grid-template-columns: 1fr;}
.article-body .sa-art .ft-th,.article-body .sa-art .ft-td{border-right: none; border-bottom: 0.5px solid var(--border);}
.article-body .sa-art .cta-block{padding: 1.5rem 1.1rem;}}
/* ── Theme alignment: prose + headings follow the blog's brand fonts ── */
.article-body .sa-art{font-family:'DM Sans',sans-serif;line-height:inherit;background:transparent;color:#07080A}
.article-body .sa-art p{font-family:'DM Sans',sans-serif;font-size:1.1rem;line-height:2;margin-bottom:1.6em;color:#07080A}
.article-body .sa-art h2{font-family:Raleway,sans-serif;font-weight:900;font-size:clamp(1.45rem,2.6vw,1.85rem);line-height:1.2;letter-spacing:-.01em;margin:1.2em 0 .7em;color:#07080A;padding:0;border:0}
.article-body .sa-art h3{font-family:Raleway,sans-serif;border-left:0;padding-left:0}
.article-body .sa-art .cta-block h3{font-family:Georgia,serif}
.article-body .sa-art a{color:#E8176A}
.article-body .sa-art .reason-pill,.article-body .sa-art .section-label{font-family:'Helvetica Neue',Arial,sans-serif}
.article-body .sa-art .tldr{margin-top:0}
.article-body .sa-art hr.section-divider{margin:2.5rem 0}
@media(max-width:640px){.article-body .sa-art .compare-grid,.article-body .sa-art .role-split,.article-body .sa-art .when-grid{grid-template-columns:1fr}}

/* ===== Case-study components (scoped to .sa-cs) ===== */
.article-body .sa-cs *,.article-body .sa-cs *::before,.article-body .sa-cs *::after{box-sizing:border-box}
.article-body .sa-cs{--green:#22c55e;--pink:#E8176A;--cyan:#00D4FF;--ink:#07080A;--white:#fff;--faint:rgba(255,255,255,.08);--accent:#22c55e;--accent-rgb:34,197,94;--accent2:#86efac;--insight:#22c55e;--insight-rgb:34,197,94;background:#07080A;color:#fff;padding:48px 44px 40px;font-family:'DM Sans',sans-serif;position:relative;overflow:hidden}
.article-body .sa-cs::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent)}
.article-body .sa-cs>*:first-child{margin-top:0}
.article-body .sa-cs h2{font-family:'Raleway',sans-serif;font-size:1.7rem;font-weight:900;color:#fff;margin:3em 0 .8em;letter-spacing:-.4px;line-height:1.15;padding:0;border:0}
.article-body .sa-cs h2:first-child{margin-top:0}
.article-body .sa-cs h3{font-family:'Raleway',sans-serif!important;font-size:1.15rem!important;font-weight:900!important;color:#fff!important;margin:2.4em 0 .7em!important;padding-left:16px!important;border-left:3px solid var(--accent)!important;line-height:1.3!important;letter-spacing:0!important}
.article-body .sa-cs p{font-family:'DM Sans',sans-serif;font-size:1rem!important;color:rgba(255,255,255,.72)!important;line-height:2!important;margin:0 0 1.6em!important}
.article-body .sa-cs strong{color:#fff;font-weight:600}
.article-body .sa-cs em{color:inherit;font-style:italic}
.article-body .sa-cs a{color:inherit}
.article-body .sa-cs ul{list-style:none;padding:0;margin:1em 0 1.8em}
.article-body .sa-cs ul li{padding:7px 0 7px 24px;position:relative;font-family:'DM Sans',sans-serif;font-size:.97rem;color:rgba(255,255,255,.68);border-bottom:1px solid rgba(255,255,255,.06);line-height:1.75;margin:0}
.article-body .sa-cs ul li:last-child{border-bottom:none}
.article-body .sa-cs ul li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:700}
.article-body .sa-cs hr.rule{border:none;border-top:1px solid rgba(255,255,255,.07);margin:3em 0}
.article-body .sa-cs .stat-bar{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.08);margin:2.2em 0}
.article-body .sa-cs .stat-cell{background:#0d0e12;padding:24px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.07)}
.article-body .sa-cs .stat-cell:last-child{border-right:none}
.article-body .sa-cs .stat-num{font-family:'Raleway',sans-serif;font-size:2.4rem;font-weight:900;color:var(--accent);line-height:1;margin-bottom:8px}
.article-body .sa-cs .stat-num.green{color:#22c55e}
.article-body .sa-cs .stat-num.pink{color:#E8176A}
.article-body .sa-cs .stat-num.red{color:#ef4444}
.article-body .sa-cs .stat-num.cyan{color:#00D4FF}
.article-body .sa-cs .stat-lbl{font-family:'DM Sans',sans-serif;font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.5}
.article-body .sa-cs .pullquote{border-left:4px solid var(--accent);margin:2.5em 0;padding:20px 28px;background:rgba(var(--accent-rgb),.06)}
.article-body .sa-cs .pullquote p{font-family:'Cormorant Garamond',serif;font-size:1.45rem!important;font-style:italic;color:rgba(255,255,255,.88)!important;line-height:1.65!important;margin:0!important}
.article-body .sa-cs .callout{border-left:3px solid;margin:2em 0;padding:16px 22px}
.article-body .sa-cs .callout.insight{background:rgba(var(--insight-rgb),.06);border-color:var(--insight)}
.article-body .sa-cs .callout.warning{background:rgba(239,68,68,.07);border-color:#ef4444}
.article-body .sa-cs .callout.featured{background:rgba(232,23,106,.05);border-color:#E8176A}
.article-body .sa-cs .callout-hdr{font-family:'Raleway',sans-serif;font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.article-body .sa-cs .callout.insight .callout-hdr{color:var(--insight)}
.article-body .sa-cs .callout.warning .callout-hdr{color:#ef4444}
.article-body .sa-cs .callout.featured .callout-hdr{color:#E8176A}
.article-body .sa-cs .callout p{font-size:.92rem!important;color:rgba(255,255,255,.68)!important;line-height:1.75!important;margin:0!important}
.article-body .sa-cs .phase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin:2em 0}
.article-body .sa-cs .phase-card{background:#0d0e12;border:1px solid rgba(255,255,255,.07);padding:24px 22px;position:relative;overflow:hidden}
.article-body .sa-cs .phase-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.article-body .sa-cs .phase-card.phase-1::before{background:#22c55e}
.article-body .sa-cs .phase-card.phase-2::before{background:#E8176A}
.article-body .sa-cs .phase-card.phase-3::before{background:#00D4FF}
.article-body .sa-cs .phase-card.phase-4::before{background:#f59e0b}
.article-body .sa-cs .phase-num{font-family:'Raleway',sans-serif;font-size:9px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:8px}
.article-body .sa-cs .phase-title{font-family:'Raleway',sans-serif;font-size:1rem;font-weight:900;color:#fff;margin-bottom:10px}
.article-body .sa-cs .phase-body{font-family:'DM Sans',sans-serif;font-size:.82rem;color:rgba(255,255,255,.48);line-height:1.7}
.article-body .sa-cs .ws-header{display:flex;align-items:center;gap:16px;margin:3.5em 0 .5em}
.article-body .sa-cs .ws-num{font-family:'Raleway',sans-serif;font-size:9px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--accent-rgb),.6);flex-shrink:0}
.article-body .sa-cs .ws-line{flex:1;height:1px;background:rgba(255,255,255,.08)}
.article-body .sa-cs .deliverables-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin:2em 0}
.article-body .sa-cs .deliverable-card{background:#0d0e12;padding:24px 22px;border:1px solid rgba(255,255,255,.07);transition:border-color .2s}
.article-body .sa-cs .deliverable-card:hover{border-color:rgba(var(--accent-rgb),.3)}
.article-body .sa-cs .del-icon{font-size:1.5rem;margin-bottom:12px;display:block;color:var(--accent)}
.article-body .sa-cs .del-title{font-family:'Raleway',sans-serif;font-size:.95rem;font-weight:900;color:#fff;margin-bottom:8px}
.article-body .sa-cs .del-body{font-family:'DM Sans',sans-serif;font-size:.82rem;color:rgba(255,255,255,.48);line-height:1.7}
.article-body .sa-cs .before-after{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.08);margin:2em 0}
.article-body .sa-cs .ba-col{padding:28px 24px}
.article-body .sa-cs .ba-col:first-child{border-right:1px solid rgba(255,255,255,.08);background:rgba(220,38,38,.05)}
.article-body .sa-cs .ba-col:last-child{background:rgba(34,197,94,.05)}
.article-body .sa-cs .ba-label{font-family:'Raleway',sans-serif;font-size:8px;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:14px}
.article-body .sa-cs .ba-col:first-child .ba-label{color:#ef4444}
.article-body .sa-cs .ba-col:last-child .ba-label{color:#22c55e}
.article-body .sa-cs .ba-col ul{list-style:none;padding:0;margin:0}
.article-body .sa-cs .ba-col ul li{padding:7px 0 7px 20px;font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.6}
.article-body .sa-cs .ba-col:first-child ul li::before{content:'✗';color:#ef4444}
.article-body .sa-cs .ba-col:last-child ul li::before{content:'✓';color:#22c55e}
.article-body .sa-cs .skills-grid{display:flex;flex-wrap:wrap;gap:8px;margin:1.5em 0 2.5em}
.article-body .sa-cs .skill-tag{font-family:'Raleway',sans-serif;font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.48);transition:all .2s}
.article-body .sa-cs .skill-tag:hover{border-color:var(--accent);color:var(--accent)}
.article-body .sa-cs .skills-label{font-family:'Raleway',sans-serif;font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.3);margin:2.5em 0 14px}
.article-body .sa-cs .mid-banner{margin:3em 0;padding:36px 40px;background:#0d0e12;border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.article-body .sa-cs .mid-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent)}
.article-body .sa-cs .mb-label{font-family:'Raleway',sans-serif;font-size:8px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:10px}
.article-body .sa-cs .mb-title{font-family:'Raleway',sans-serif;font-size:1.25rem;font-weight:900;color:#fff;margin-bottom:8px}
.article-body .sa-cs .mb-body{font-family:'DM Sans',sans-serif;font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.75;margin-bottom:22px;max-width:500px}
.article-body .sa-cs .btn-pink,.article-body .sa-cs .btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;font-family:'Raleway',sans-serif;font-size:9px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;transition:opacity .2s}
.article-body .sa-cs .btn-pink{background:#E8176A;color:#fff}
.article-body .sa-cs .btn-pink:hover{opacity:.85}
.article-body .sa-cs .btn-ghost{background:transparent;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.18)}
.article-body .sa-cs .btn-ghost:hover{border-color:rgba(255,255,255,.45);color:#fff}
.article-body .sa-cs .author-box{border:1px solid rgba(255,255,255,.08);padding:28px 32px;margin:3em 0 0;display:flex;gap:20px;align-items:flex-start}
.article-body .sa-cs .author-sq{width:52px;height:52px;background:linear-gradient(135deg,#E8176A,#7c5cbf);display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-weight:800;font-size:17px;color:#fff;flex-shrink:0}
.article-body .sa-cs .author-name{font-family:'Raleway',sans-serif;font-size:.95rem;font-weight:900;color:#fff;margin-bottom:3px}
.article-body .sa-cs .author-role{font-family:'Raleway',sans-serif;font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#E8176A;margin-bottom:10px}
.article-body .sa-cs .author-bio{font-family:'DM Sans',sans-serif;font-size:.82rem;color:rgba(255,255,255,.52);line-height:1.75}
.article-body .sa-cs .author-links{display:flex;gap:14px;margin-top:12px}
.article-body .sa-cs .a-link{font-family:'Raleway',sans-serif;font-size:8px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#E8176A;text-decoration:none;border-bottom:1px solid rgba(232,23,106,.3);padding-bottom:1px}
.article-body .sa-cs .a-link:hover{border-color:#E8176A}
body.is-case-study #article-body{max-width:none!important}
@media(max-width:768px){.article-body .sa-cs{padding:36px 22px 28px}
.article-body .sa-cs .mid-banner{padding:28px 22px}}
@media(max-width:640px){.article-body .sa-cs .stat-bar{grid-template-columns:1fr 1fr}
.article-body .sa-cs .stat-cell{border-bottom:1px solid rgba(255,255,255,.07)}
.article-body .sa-cs .stat-cell:nth-child(2n){border-right:none}
.article-body .sa-cs .before-after{grid-template-columns:1fr}
.article-body .sa-cs .ba-col:first-child{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}
@media(max-width:580px){.article-body .sa-cs .phase-grid,.article-body .sa-cs .deliverables-grid{grid-template-columns:1fr}}
@media(max-width:560px){.article-body .sa-cs .author-box{flex-direction:column}}
@media(max-width:580px){.article-body .sa-cs .deliverable-card{grid-column:auto!important}}
.article-body .sa-cs .stat-cell:nth-child(n+4){border-top:1px solid rgba(255,255,255,.07)}
.article-body .sa-cs .stat-num{overflow-wrap:anywhere}
@media(max-width:640px){.article-body .sa-cs .stat-cell:nth-child(n+4){border-top:0}}