/* Mobile public header: one aligned logo/action row, navigation below. */
@media(max-width:600px){
 .public-site .topbar:has(.nav a[href="#problem"]){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:6px;row-gap:8px;align-items:center;padding:12px 20px}
 .public-site .topbar:has(.nav a[href="#problem"]) .brand{grid-column:1 / span 5;grid-row:1;width:100%;max-width:130px;min-width:0;align-self:center}
 .public-site .topbar:has(.nav a[href="#problem"]) .brand-logo{width:100%;height:auto;max-height:56px;object-fit:contain}
 .public-site .topbar:has(.nav a[href="#problem"]) .nav{display:contents}
 .public-site .topbar:has(.nav a[href="#problem"]) .nav a:not(.button){grid-row:2;grid-column:span 3;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:11px;white-space:normal;text-align:center;line-height:1.35}
 .public-site .topbar:has(.nav a[href="#problem"]) .nav a.button{position:static;inset:auto;margin:0;min-width:0;min-height:44px;padding:10px 8px;box-sizing:border-box;justify-content:center;align-self:center;font-size:12px;line-height:1.5}
 .public-site .topbar:has(.nav a[href="#problem"]) .nav .login{grid-column:6 / span 3;grid-row:1}
 .public-site .topbar:has(.nav a[href="#problem"]) .nav .primary{grid-column:9 / span 4;grid-row:1}
}