/* Rudh Systems shared blog responsiveness — do not remove */
:root{--blog-mobile-gutter:16px;--blog-max:1180px;--article-max:760px}

html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0}
main,header,footer,section,.hero,.list,.layout,aside,.card,.card-media{min-width:0;max-width:100%}
.wrap{width:100%;max-width:var(--blog-max);margin-left:auto;margin-right:auto}
.layout>* ,.card>* ,.navin>* ,.meta>*{min-width:0}
article{width:100%;max-width:var(--article-max);min-width:0;overflow-wrap:anywhere}
article p,article li,article h1,article h2,article h3,.answer,.note,.legal,.cta,.sources,.sidecard{overflow-wrap:anywhere;word-break:normal}
img,svg{max-width:100%}
.feature,.feature img,.card-media,.card-media img{max-width:100%;min-width:0}
.feature img,.card-media{aspect-ratio:16/9}
.feature img,.card-media img{object-fit:cover}
.tablewrap{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.tablewrap table{margin:0}
.steps li>*{min-width:0}

/* Wide desktop: centred editorial article with a deliberate reading measure. */
@media (min-width:1200px){
  .layout{grid-template-columns:minmax(0,var(--article-max)) minmax(240px,280px)!important;justify-content:space-between;gap:clamp(40px,5vw,64px)!important}
  article{max-width:var(--article-max)!important}
  aside{width:100%;max-width:280px}
}

/* Laptop / small desktop: keep the sidebar but avoid squeezing the main copy. */
@media (min-width:901px) and (max-width:1199px){
  .wrap{max-width:1080px}
  .layout{grid-template-columns:minmax(0,1fr) minmax(210px,240px)!important;gap:clamp(28px,4vw,40px)!important}
  article{max-width:none!important}
  aside{width:100%;max-width:240px}
  .toc a{font-size:.8rem}
}

/* Tablet and below: single reading column. */
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)!important;gap:30px!important}
  article{max-width:100%!important}
  aside{position:static!important;width:100%;max-width:100%}
  .toc{display:none!important}
  .navlinks{display:flex!important;align-items:center;gap:14px;font-size:.84rem}
  .navlinks a{display:none!important}
  .navlinks a[href="/"],.navlinks a[href="/blog/"]{display:inline-flex!important}
}

@media (min-width:761px) and (max-width:900px){
  .card{grid-template-columns:minmax(220px,38%) minmax(0,1fr)!important;gap:24px!important}
}

@media (max-width:760px){
  body{font-size:16px!important;line-height:1.68}
  .wrap{max-width:100%!important;padding-left:var(--blog-mobile-gutter)!important;padding-right:var(--blog-mobile-gutter)!important}
  .navin{min-height:60px!important;gap:12px}
  .brand{min-width:0;white-space:nowrap}
  .navlinks{flex:0 0 auto;gap:10px!important;font-size:.8rem!important}
  .hero{padding-top:32px!important;padding-bottom:24px!important}
  .hero h1,h1{font-size:clamp(2.1rem,10vw,3.15rem)!important;line-height:1.06!important;max-width:100%!important;overflow-wrap:anywhere}
  .hero p,.dek{max-width:100%!important}
  .dek{font-size:1.1rem!important;line-height:1.5!important;margin-top:18px!important}
  .crumbs{font-size:.73rem!important;line-height:1.45!important;margin-bottom:18px!important;overflow-wrap:anywhere}
  .eyebrow{max-width:100%!important;white-space:normal!important;line-height:1.35!important;padding:7px 9px!important}
  .meta{gap:7px 12px!important;margin-top:20px!important;font-size:.78rem!important}
  .feature{margin-top:24px!important;padding:6px!important;width:100%}
  .layout{padding-top:28px!important;padding-bottom:64px!important}
  article p{margin-bottom:1.15rem!important}
  article h2{font-size:clamp(1.78rem,8vw,2.35rem)!important;line-height:1.1!important;margin:2.55rem 0 1rem!important;overflow-wrap:anywhere}
  article h3{font-size:clamp(1.28rem,6vw,1.65rem)!important;line-height:1.18!important;margin:1.9rem 0 .7rem!important;overflow-wrap:anywhere}
  article ul,article ol{padding-left:1.1rem!important}
  .answer,.note,.legal{padding:17px 16px!important;margin-left:0!important;margin-right:0!important;width:100%}
  .answer strong{font-size:.72rem!important}
  .tablewrap{margin:1.25rem 0 1.75rem!important;border-radius:0}
  .tablewrap table{min-width:560px!important;font-size:.86rem!important}
  .tablewrap th,.tablewrap td{padding:11px 12px!important;line-height:1.5}
  .steps li{grid-template-columns:32px minmax(0,1fr)!important;gap:10px!important;padding:12px 0!important}
  .steps li:before{width:28px!important;height:28px!important}
  .cta{padding:22px 18px!important;margin:2.3rem 0!important;width:100%}
  .cta h2{font-size:1.75rem!important}
  .actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:100%!important}
  .btn{width:100%!important;min-width:0!important;text-align:center;white-space:normal}
  .sources{padding-left:1.05rem!important}
  .sources a{overflow-wrap:anywhere}
  .list{padding:34px 0 64px!important}
  .card{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:20px 0 24px!important;width:100%}
  .card h2{font-size:clamp(1.65rem,8vw,2.25rem)!important;line-height:1.12!important;overflow-wrap:anywhere}
  .card p{font-size:.95rem;line-height:1.6}
  .card-media{display:block!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden}
  .card-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .foot{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
}

@media (max-width:420px){
  :root{--blog-mobile-gutter:14px}
  .navlinks a[href="/"]{display:none!important}
  .hero h1,h1{font-size:clamp(2rem,10.5vw,2.65rem)!important}
  .answer,.note,.legal{padding:16px 14px!important}
  .tablewrap table{min-width:520px!important}
}

@media (max-width:340px){
  :root{--blog-mobile-gutter:12px}
  .brand{font-size:.9rem}
  .navlinks{font-size:.76rem!important}
  .hero h1,h1{font-size:1.92rem!important}
}
