.article-page{background:#ffffff;min-height:100vh}.article-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 14% 18%,rgba(37,99,235,.11),transparent 24%),linear-gradient(180deg,#ffffff,#f8fafc);color:var(--gray-900);padding:7.25rem 0 4rem;border-bottom:1px solid var(--gray-100)}.article-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(37,99,235,.14) 1px,transparent 0);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 84%);mask-image:linear-gradient(180deg,#000,transparent 84%);pointer-events:none}.article-hero .container{position:relative;z-index:1}.article-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--gray-500);margin-bottom:1.25rem}.article-breadcrumb a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.article-breadcrumb a:hover{opacity:.9}.article-breadcrumb span:not(a){opacity:.5}.article-meta-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}.article-category{background:var(--primary-faint);border:1px solid #dbeafe;border-radius:var(--radius-full);padding:.25rem .875rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primary)}.article-read-time{font-size:.8125rem;color:var(--gray-500);opacity:1}.article-title{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:900;line-height:1.1;letter-spacing:0;max-width:800px;margin-bottom:1.25rem;color:var(--gray-900)}.article-subtitle{font-size:1.1rem;line-height:1.7;opacity:1;color:var(--gray-600);max-width:680px;margin-bottom:2rem}.article-author{gap:.875rem}.article-author,.author-avatar{display:flex;align-items:center}.author-avatar{width:42px;height:42px;border-radius:50%;background:var(--primary);color:white;justify-content:center;font-weight:700;font-size:.875rem;font-family:var(--font-display);flex-shrink:0}.author-info{display:flex;flex-direction:column;gap:.15rem}.author-name{font-weight:600;font-size:.9rem}.author-date{font-size:.78rem;color:var(--gray-500);opacity:1}.article-layout{display:grid;grid-template-columns:1fr 300px;grid-gap:3rem;gap:3rem;padding-top:3rem;padding-bottom:5rem;align-items:start}.article-body{background:rgba(255,255,255,.96);border:1px solid var(--gray-200);border-radius:22px;padding:2.5rem 3rem;box-shadow:var(--shadow-sm)}.article-body h2{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--gray-900);margin-top:2.5rem;margin-bottom:1rem;letter-spacing:0}.article-body h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--gray-800);margin-top:1.5rem;margin-bottom:.6rem}.article-body p{color:var(--gray-700);line-height:1.8;font-size:1.0125rem;margin-bottom:1.25rem}.article-intro-box{background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(13,148,136,.06));border:1px solid rgba(37,99,235,.15);border-left:4px solid var(--primary);border-radius:0 var(--radius) var(--radius) 0;padding:1.125rem 1.5rem;margin-bottom:1.75rem;color:var(--gray-800);line-height:1.7;font-size:1.0125rem}.article-divider{border:none;border-top:1px solid var(--gray-200);margin:2rem 0}.article-list{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.75rem}.article-list li{display:flex;align-items:flex-start;gap:.75rem;color:var(--gray-700);line-height:1.65;font-size:1.0125rem}.article-list li:before{content:"✓";color:var(--primary);font-weight:700;margin-top:.05rem;flex-shrink:0}.article-callout{display:flex;gap:1rem;padding:1.125rem 1.5rem;border-radius:var(--radius-lg);margin:1.75rem 0;font-size:.9625rem;line-height:1.65}.callout-tip{background:#eff6ff;border:1px solid #bfdbfe}.callout-warning{background:#fffbeb;border:1px solid #fde68a}.callout-icon{font-size:1.25rem;flex-shrink:0;margin-top:.1rem}.article-callout strong{color:var(--gray-900)}.article-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1rem;gap:1rem;margin:1.75rem 0}.article-feature-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.25rem}.article-feature-card .feature-emoji{display:block;font-size:1.5rem;margin-bottom:.5rem}.article-feature-card h3{font-size:.9375rem;font-weight:700;color:var(--gray-900);margin:0 0 .35rem}.article-feature-card p{font-size:.875rem;color:var(--gray-600);line-height:1.55;margin:0}.article-steps{display:flex;flex-direction:column;gap:1.25rem;margin:1.75rem 0}.article-step{display:flex;gap:1.25rem;align-items:flex-start}.step-number{width:40px;height:40px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1rem;flex-shrink:0;margin-top:2px}.step-content h3{font-size:1.05rem;font-weight:700;color:var(--gray-900);margin:0 0 .35rem}.step-content p{font-size:.9625rem;color:var(--gray-700);line-height:1.65;margin:0}.article-table-wrapper{overflow-x:auto;margin:1.75rem 0;border-radius:var(--radius-lg);border:1px solid var(--gray-200)}.article-table{width:100%;border-collapse:collapse;font-size:.9375rem}.article-table th{background:var(--gray-50);padding:.875rem 1rem;text-align:left;font-family:var(--font-display);font-weight:700;color:var(--gray-800);border-bottom:2px solid var(--gray-200);white-space:nowrap}.article-table td{padding:.75rem 1rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100)}.article-table tr:last-child td{border-bottom:none}.article-table tr:nth-child(2n) td{background:var(--gray-50)}.highlight-green{color:#059669;font-weight:600}.article-faq{display:flex;flex-direction:column;gap:.75rem;margin:1.5rem 0}.faq-item{border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden}.faq-item summary{padding:1rem 1.25rem;cursor:pointer;font-weight:600;font-family:var(--font-display);color:var(--gray-900);font-size:.9625rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.faq-item summary:after{content:"+";font-size:1.25rem;color:var(--primary);flex-shrink:0;transition:transform .2s}.faq-item[open] summary:after{transform:rotate(45deg)}.faq-item summary::-webkit-details-marker{display:none}.faq-item p{margin:0;font-size:.9375rem;color:var(--gray-700);line-height:1.7;border-top:1px solid var(--gray-100);padding:.875rem 1.25rem 1rem}.article-cta{background:linear-gradient(135deg,#2563EB,#0D9488);border-radius:22px;padding:2.5rem;margin-top:2.5rem;text-align:center;color:white}.article-cta h3{font-family:var(--font-display);font-size:1.5rem;font-weight:800;margin-bottom:.75rem;color:white}.article-cta p{opacity:.85;margin-bottom:1.5rem;color:white}.article-cta .btn-primary{background:white;color:var(--primary);font-weight:700}.article-cta .btn-primary:hover{background:#f0f0ff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}.article-sidebar{position:-webkit-sticky;position:sticky;top:100px;display:flex;flex-direction:column;gap:1.25rem}.sidebar-card{background:rgba(255,255,255,.96);border:1px solid var(--gray-200);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow-sm)}.sidebar-card h4{font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--gray-900);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.06em}.sidebar-card ul{display:flex;flex-direction:column;gap:.6rem}.sidebar-card ul li{display:flex;align-items:center;gap:.625rem;font-size:.9rem;color:var(--gray-700)}.sidebar-card ul li span:first-child{font-size:1rem;width:20px;text-align:center}.sidebar-cta{background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(13,148,136,.06));border:1px solid rgba(37,99,235,.2)}.sidebar-cta p{font-size:.875rem;color:var(--gray-600);margin-bottom:1rem;line-height:1.55}.sidebar-cta .btn-primary{width:100%;justify-content:center}.toc{display:flex;flex-direction:column;gap:.5rem;padding-left:1rem;list-style:decimal}.toc li{font-size:.875rem;color:var(--gray-600)}.toc li a{color:var(--primary);text-decoration:none}.toc li a:hover{text-decoration:underline}@media (max-width:1024px){.article-layout{grid-template-columns:1fr}.article-sidebar{position:static;display:grid;grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.article-body{padding:1.75rem 1.5rem}.article-feature-grid,.article-sidebar{grid-template-columns:1fr}.article-hero{padding:6rem 0 3rem}}@media (max-width:640px){.article-body h2{font-size:1.35rem}.article-cta{padding:1.75rem 1.25rem}.article-table td,.article-table th{padding:.6rem .75rem;font-size:.85rem}}