
/* ===== v29 nav + mobile pack ===== */
html,body{overflow-x:hidden;max-width:100%;}
*,*::before,*::after{box-sizing:border-box;}
img,video,iframe,table,pre{max-width:100%;}
.site-header{position:sticky;top:0;z-index:900;}
.bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.brand{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.site-nav ul{list-style:none;margin:0;padding:0;}
.site-nav>ul{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.site-nav a,.site-nav .sub-toggle{display:block;font:bold 12px/1.2 inherit;color:#dbe6f5;
  background:none;border:0;cursor:pointer;padding:10px 10px;border-radius:4px;text-decoration:none;}
.site-nav a:hover,.site-nav .sub-toggle:hover{background:#16386e;color:#fff;}
.site-nav a[aria-current="page"]{background:#123163;color:#fff;}
.site-nav .caret{font-size:9px;opacity:.75;margin-left:2px;}
.has-sub{position:relative;}
.has-sub>.sub{position:absolute;top:100%;left:0;min-width:232px;background:#fff;
  border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.16);
  padding:6px;display:none;z-index:950;}
.has-sub>.sub a{color:#1f3b63;font-weight:600;font-size:13px;padding:9px 10px;white-space:nowrap;}
.has-sub>.sub a:hover{background:#eef4fd;color:#0b2f66;}
.has-sub.open>.sub{display:block;}
@media (hover:hover){.has-sub:hover>.sub{display:block;}}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  font-size:20px;line-height:1;padding:6px 11px;border-radius:6px;cursor:pointer;margin-left:auto;}
@media (max-width:900px){
  .nav-toggle{display:block;}
  .site-nav{display:none;width:100%;max-height:72vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:10px;}
  .site-nav.open{display:block;}
  .site-nav>ul{flex-direction:column;align-items:stretch;gap:1px;}
  .site-nav a,.site-nav .sub-toggle{width:100%;text-align:left;min-height:44px;
    display:flex;align-items:center;font-size:14px;padding:11px 12px;}
  .has-sub>.sub{position:static;display:none;box-shadow:none;border:0;border-radius:0;
    background:rgba(255,255,255,.07);margin:0 0 3px;padding:0 0 0 10px;min-width:0;}
  .has-sub.open>.sub{display:block;}
  .has-sub>.sub a{color:#dbe6f5;font-size:13.5px;white-space:normal;}
  .has-sub>.sub a:hover{background:#16386e;color:#fff;}
  .sub-toggle[aria-expanded="true"]{background:#16386e;color:#fff;}
}
/* tap targets + readability */
a,button,summary,input,select{min-height:24px;}
.related-grid a,.tool-card,.card,details>summary{min-height:44px;}
details>summary{padding:11px 10px;font-size:15px;}
@media (max-width:640px){
  body{font-size:16px;}
  h1{font-size:1.55rem;line-height:1.25;}
  h2{font-size:1.22rem;}
  .related-grid{grid-template-columns:1fr 1fr!important;}
  .steps li{font-size:15px;line-height:1.6;}
  #popular-tools{line-height:2.1;font-size:.82rem;}
  #popular-tools a{display:inline-block;padding:2px 0;}
}
@media (max-width:400px){ .related-grid{grid-template-columns:1fr!important;} }
/* tables scroll instead of breaking layout */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.spec-table{width:100%;border-collapse:collapse;min-width:320px;}
/* tool iframe: full height on desktop, viewport-aware on phones */
.tool-frame{width:100%;height:720px;border:1px solid var(--line,#cbd5e1);border-radius:8px;}
@media (max-width:640px){ .tool-frame{height:88vh;min-height:560px;} }

.nav-cta{background:#8fc34d!important;color:#10305e!important;font-weight:800!important;border-radius:5px;}
.nav-cta:hover{background:#7fb23f!important;color:#062244!important;}
.header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;position:relative;}
.logo{white-space:nowrap;}
@media (max-width:900px){ .header .site-nav{order:3;} }

.nav-cta{background:#8fc34d!important;color:#10305e!important;font-weight:800!important;border-radius:5px;}
.nav-cta:hover{background:#7fb23f!important;color:#062244!important;}
.header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;position:relative;}
.logo{white-space:nowrap;}
@media (max-width:900px){ .header .site-nav{order:3;} }